
<template>

  <view>

    <!--悬浮按钮-->
    <uni-fab ref="fab"
             :pattern="fab.pattern"
             :content="fab.content"
             :horizontal="fab.horizontal"
             :vertical="fab.vertical"
             :direction="fab.direction"
             @trigger="fab.trigger"
    />

    <uni-popup ref="message" type="message">
      <uni-popup-message type="success" message="加载完毕,您可以点击商品图像快速预览商品信息" :duration="2000"></uni-popup-message>
    </uni-popup>

    <!-- 教学视频弹窗 -->
    <u-popup
        :show="tVideo.show"
        :round="10"
        mode="center"
        :direction=0
    >
      <view style="margin: 10px">
        <view
            style="text-align: center;
            margin: 0 5px 10px 5px;"
        >
          <text style="color:#e80831">不知道如何操作?&nbsp;&nbsp;看看教程吧!</text>
        </view>
        <view>
          <video
              id="myVideo"
              src="https://www.tdtye.com/files/vegetable_mall_file/default/addGroupGoods.mp4"
              controls
          >
          </video>
        </view>
        <view>
          <u-button type="info" :plain="true" @click="tVideo.close()">
            <text style="font-size: 36rpx;font-weight: bold">
              关&nbsp;&nbsp;闭
            </text>
          </u-button>
        </view>
      </view>
    </u-popup>

    <u-popup
        :show="condition.show"
        :round="10"
        mode="bottom"
        :direction=0
        :closeable=true
        @close="condition.close()"
    >
      <view>
        <view style="text-align: center;margin: 10px 0 20px 0 ">
          <text style="font-size: 34rpx;font-weight: bold">
            填充筛选条件(不填的条件不参与判断)
          </text>
        </view>
        <view style="margin: 10px 10px">
          <u--form labelPosition="left" labelWidth="auto">
            <u-form-item label="团购标题包含:">
              <u--input v-model="condition.data.title" :clearable=true border="bottom"></u--input>
            </u-form-item>
            <u-form-item label="商品分类:">
              <u-tag
                  :text=options.goodsCategory.text
                  plain
                  size="large"
                  type="info"
                  @click="options.goodsCategory.open"
              ></u-tag>
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>

            <u-form-item label="团购时间范围:">
              <view style="z-index:10000">
                <uni-datetime-picker
                    hide-second="true"
                    type="datetimerange"
                    v-model="condition.data.item.value"
                    @change="condition.data.time.change"
                    rangeSeparator="至" />
              </view>
            </u-form-item>

            <view>
              <u-row gutter="1">
                <u-col :span="6">
                  <u-button type="success" text="清空" @click="condition.def()"></u-button>
                </u-col>
                <u-col :span="6">
                  <u-button type="primary" text="搜索" @click="condition.search()"></u-button>
                </u-col>
              </u-row>
            </view>
          </u--form>
        </view>
      </view>
    </u-popup>

    <!--商品分类选择器-->
    <u-picker
        :show="options.goodsCategory.show"
        :columns="options.goodsCategory.ops"
        @confirm="options.goodsCategory.confirm"
        @close="options.goodsCategory.close"
        @cancel="options.goodsCategory.close"
        closeOnClickOverlay="true"
        title="选择商品分类"
        keyName="name"
    >
    </u-picker>

    <!-- 排序 -->
    <u-picker
        :show="listSortPicker.show"
        :columns="listSortPicker.options"
        @confirm="listSortPicker.confirm"
        @close="listSortPicker.close"
        @cancel="listSortPicker.close"
        title="选择某属性点击确定即可"
        :closeOnClickOverlay=true
        keyName="label"
    >
    </u-picker>

		<view>
      <view style="margin: 20rpx 0 0 20rpx">
        <view style="display: inline-block;margin-right: 10rpx">
          <u-button shape="circle" size="medium" @click="condition.open">
            <text style="font-size: 24rpx;
            font-weight: bold;
            color: #8c7d7d;padding: 0 20rpx">
              条件搜索
            </text>
          </u-button>
        </view>

        <view style="display: inline-block;margin-right: 10rpx">
          <u-button @click="listSortPicker.show = true" shape="circle" size="medium">
            <text style="font-size: 24rpx;
            font-weight: bold;
            color: #8c7d7d;padding: 0 20rpx">
              表格排序
            </text>
          </u-button>
        </view>

        <view style="display: inline-block;">
          <u-button @click="tVideo.open()" shape="circle" size="medium">
            <text style="font-size: 24rpx;
            font-weight: bold;
            color: #8c7d7d;padding: 0 20rpx">
              操作教程
            </text>
          </u-button>
        </view>

      </view>

      <!-- 表格 -->
      <view
          style="margin: 20rpx 30rpx"
      >
        <uni-table
            border
            stripe
            :loading=list.loading
            emptyText="您还没有上传团购商品哦."
        >
          <!-- 表头行 -->
          <uni-tr>

            <uni-th align="center" width="100rpx">
              <text class="table-th-font">主图</text>
            </uni-th>

            <uni-th align="center" width="200rpx">
                <text class="table-th-font">标题</text>
            </uni-th>

            <uni-th align="center" width="200rpx">
              <text class="table-th-font">销量</text>
            </uni-th>

            <uni-th align="center" width="150rpx">
              <text class="table-th-font">状态</text>
            </uni-th>

            <uni-th align="center" width="500rpx">
              <text class="table-th-font">操作</text>
            </uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item,index) in list.data " :key="index">

            <uni-td align="center">
              <view>
                  <uni-tooltip content="提示文字">
                    <u-avatar @click="test(item)" :src="item.avatar" size="60rpx"></u-avatar>
                  </uni-tooltip>
              </view>
            </uni-td>

            <uni-td align="center">
              <text id="text">{{item.title}}</text>
            </uni-td>

            <uni-td align="center">
              <text id="text">{{item.sale}}</text>
            </uni-td>

            <uni-td align="center">
              <rich-text :nodes="listStyle.getStatusFont(item.status)"></rich-text>
            </uni-td>

            <uni-td align="center">
              <button
                  class="operation-btn"
                  type="primary"
                  size="mini"
                  @click="list.gotoUpdate(item)"
              >详情</button>
              <button class="operation-btn" type="default" size="mini" @click="updateStatus(item)">
                <rich-text :nodes="listStyle.getStatusBtn(item.status)"></rich-text>
              </button>
              <button class="operation-btn" type="warn" size="mini" @click="deleteItem(item.id,index)">删除</button>
            </uni-td>
          </uni-tr>
        </uni-table>

      </view>

      <!-- 分页 -->
      <view
          style="text-align: center"
      >
        <view style="display: inline-block;margin: 0 8rpx">
          <page-pagination
              :total="list.total"
              :pageSize="list.pageSize"
              :showAround="true"
              :btnText="true"
              :forceEllipses="true"
              @change="setPageNo">
          </page-pagination>
        </view>

      </view>
    </view>
    <!--自己封装的提示器-->
    <popup ref="popup"/>

    <u-modal
        :show="modal.byUpdateStatus.show"
        :showCancelButton="true"
        :title="modal.byUpdateStatus.title"
        :confirmText="modal.byUpdateStatus.confirmText"
        :cancel="modal.byUpdateStatus.cancelText"
        @confirm="modal.byUpdateStatus.confirm"
        @close="modal.byUpdateStatus.close"
        @cancel="modal.byUpdateStatus.cancel"
    >
      <view>
        <rich-text :nodes="modal.byUpdateStatus.content"></rich-text>
      </view>
    </u-modal>
	</view>
</template>

<script>
	import UniTr from "../../../uni_modules/uni-table/components/uni-tr/uni-tr";
  import UAvatar from "../../../uni_modules/uview-ui/components/u-avatar/u-avatar";
  import popup from "@/merchant/my/my-popup"
  import service from "../../../utils/service";
  export default {
    components: {UAvatar, UniTr,popup},
    data() {
      var _vm = this
			return {
			  // 表格排序选择器
			  listSortPicker:{
			    show: false,
          // 排序字段
          sortKey: null,
          // 排序规则 1 正序 -1 倒序
          sort: -1,
          options: [
            [
              {label: '默认', key: null},
              {label: '销量', key: 'sale'},
              {label: '创建时间', key: 'create_time'},
              {label: '拼团开始时间', key: 'start_time'},
              {label: '拼团结束时间', key: 'end_time'},
            ],
            [
              {label: '从小到大', value: 1},
              {label: '从大到小', value: -1},
            ],
          ],
          // 确认回调
          confirm(v){
            let me = _vm.listSortPicker;
            console.log("表格排序选项结果 : ", v)
            me.show = false;
            // 默认
            if (v.value[0].key === null) {
              me.sort = v.value[1].value;
            }else{
              me.sortKey = v.value[0].key;
            }
            me.sort = v.value[1].value;
            this.getList();
          },
          close(){
            _vm.listSortPicker.show = false;
          }
        },
        // 表格对象
			  list:{
			    loading: true,
          total: 0,
          pageSize: 10,
          pageNo: 1,
          data: [],
          gotoUpdate(item){
            console.log("跳转到修改页面 :" ,item)
            let data = JSON.stringify({
              target: 'update',
              goodsId: item.id
            })
            uni.navigateTo({
              url: 'editor?param=' + data
            })
          },
        },

        // 表格样式
        listStyle: {
			    getStatusFont(status){
			      switch (status) {
			        case 0:
			          return "<span style='color: #2dbb5b'>拼团中</span>"
              case -1:
                return "<span style='color: #f01414'>已下架</span>"
            }
          },
          getStatusBtn(status){
			      switch(status){
            case 0:
              return "<span style='color: #03f638'>下架</span>"
            case -1:
              return "<span style='color: #f80404'>上架</span>"
            }
          },
        },

        /*悬浮按钮对象*/
        fab:{
          title: 'uni-fab',
          directionStr: '垂直',
          horizontal: 'right',
          vertical: 'top',
          direction: 'horizontal',
          pattern: {
            color: '#f30505',
            backgroundColor: '#fc080800',
            selectedColor: '#fc2752',
            buttonColor: '#36d64645',
            iconColor: '#fff'
          },
          is_color_type: false,
          content: [
            {
              iconPath: 'https://s1.chu0.com/src/img/png/03/03d5b786444844a5a424c143dba43b32.png?imageMogr2/auto-orient/thumbnail/!234x234r/gravity/Center/crop/234x234/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:e32FjXBL3nT7cRQXCcdByMM5-MQ=',
              selectedIconPath: 'https://s1.aigei.com/src/img/png/39/3977b149ad9f4565ab630d98f33a98b7.png?imageMogr2/auto-orient/thumbnail/!234x234r/gravity/Center/crop/234x234/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:6xu3wgiuYq2BGyMxHYN1nHA2c_M=',
              text: '添加商品',
              active: false,
            },
          ],
          trigger(v){
            console.log("悬浮标签点击回调 :" ,v);
            if(v.index === 0){
              let data = JSON.stringify({target: 'add'});
              uni.navigateTo({
                url: 'editor?param='+data,
              })
            }
          }
        },

        /* 教学视频对象 */
        tVideo:{
          start: true,
          show: false,
          open(){
            _vm.tVideo.show = true;
          },
          close(){
            _vm.tVideo.show = false;
          }
        },

        /* 条件筛选对象 */
        condition:{
          show: false,
          open(){
            _vm.condition.show = true;
          },
          close(){
            _vm.condition.show = false;
          },
          data: {
            /* 团购标题 */
            title: '',
            /* 分类id */
            category: -1,
            /* 拼团时间 */
            time: {
              value:[],
              change(e){
                console.log("选中团购日期 : ", e)
              }
            }
          },
          def(){
            _vm.condition.data.title = ''
            _vm.condition.data.category = -1
            _vm.condition.data.time.value = []
            _vm.options.goodsCategory.def()
            _vm.condition.search();
          },
          search(){
            console.log("点击搜索 条件 : ", _vm.condition.data)
            _vm.condition.close();
            _vm.getList();
          }
        },

        /* 选项相关对象 */
        options: {
          goodsCategory:{
            show: false,
            ops: [[]],
            text:'点击选择分类',
            close(){
              _vm.options.goodsCategory.show = false;
            },
            open(){
              _vm.options.goodsCategory.show = true;
            },
            confirm(e){
              console.log("商品分类被选中 : ", e)
              _vm.options.goodsCategory.show = false
              _vm.condition.data.category = e.value[0].id
              _vm.options.goodsCategory.text = e.value[0].name
            },
            def(){
              _vm.options.goodsCategory.text = '点击选择分类';
            }
          }
        },

        /* 模态窗相关对象 */
        modal:{
          /* 根据与 修改团购商品状态的模态窗 */
          byUpdateStatus:{
            show: false,
            title : '注意',
            confirmText: '确认下架',
            cancelText: '取消',
            /* 需要下架的商品 */
            item: null,
            content: '<span style="color: #ff7f50">当前商品已有用户下单 !</span>'
            + '<span style="color: #ff4757;font-size: 17px"> 确认要下架吗 ?  </span>'
            + '<br/><span style="color:#57606f"> [ 商品下架后请积极联系用户协商退款等事宜, 平台发现拖延退款 或 不予处理的商家将 "严重处罚 !" ] </span>',
            open(item){
              _vm.modal.byUpdateStatus.item = item
              _vm.modal.byUpdateStatus.show = true
            },
            confirm(){
              _vm.updateStatus(_vm.modal.byUpdateStatus.item ,1);
              _vm.modal.byUpdateStatus.close();
            },
            cancel() {
              _vm.modal.byUpdateStatus.close();
            },
            close() {
              _vm.modal.byUpdateStatus.show = false
            },
          }
        }
			}
		},
    onLoad(){
      // 获取图像地址前缀
      this.imgApi = this.$reqConfig.URLIMAGE
      // 获取请求头类型
      this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
      // 获取token
      this.token = uni.getStorageSync("merchantsToken").token
    },
    onShow() {
      //获取商品分类选项
      this.getCategoryOptions();
      //获取列表
      this.getList();
    },
		methods: {
      test(v){
        console.log(v)
      },
      setPageNo(v){
        this.list.pageNo = v
        this.getList();
      },
      // param 附加参数
      getList(){
			  let _t = this;
        _t.list.loading=true
			  let data = {
          pageSize: _t.list.pageSize,
          pageNo: _t.list.pageNo,
        }
        // 如果有排序字段添加排序字段
        if(this.listSortPicker.sortKey !== null){
          data.sortKey = this.listSortPicker.sortKey;
          data.sort = this.listSortPicker.sort;
        }
        /* 以下为条件判断 */
        if(!service.check.isNull(this.condition.data.title)){
          data.title = this.condition.data.title;
        }
        if(this.condition.data.category !== -1){
          data.categoryId = this.condition.data.category;
        }
        if(this.condition.data.time.value.length !== 0){
          data.time = JSON.stringify(this.condition.data.time.value);
        }
        // 如果有判断条件添加条件
			  this.$axios({
          url: 'merchant/merchantGroupGoods/list',
          method: "post",
          data: data,
          header: {
            "Authorization": this.token,
            "Content-type": this.contentType,
            "type": "merchantsToken"
          },
        }).then(res => {
          _t.list.loading = false
          console.log("merchant/merchantGroupGoods/list : " ,res)
          if(res.code === 0){
            _t.list.data = res.result.list;
            _t.list.total = res.result.total;
            _t.list.pageSize = res.result.pageSize;
            // 解析 轮播图 以及图像
            _t.list.data.forEach(e => {
              e.img = JSON.parse(e.img);
              e.avatar =  _t.imgApi + e.avatar
              for (let i = 0; i < e.img.length; i++) {
                e.img[i] = _t.imgApi + e.img[i];
              }
            })
            /*_t.$refs.message.open()*/
            console.log("商品列表: ", _t.list.data)
            if(_t.list.data.length === 0 && _t.tVideo.start){
              _t.tVideo.start = false;
              _t.tVideo.open();
            }
          }
        })
      },
      /*删除单个商品*/
      deleteItem(id,index){
        let _t = this;
        this.$axios({
          url: 'merchant/merchantGroupGoods/remove',
          method: 'post',
          data: {
            id: id,
          },
          header: {
            "Authorization": this.token,
            "Content-type": this.contentType,
            "type": "merchantsToken"
          },
        }).then(res => {
          console.log("merchant/merchantGroupGoods/remove : ", res)
          if(res.code === 0){
            _t.$refs.popup.success("删除成功");
            // 本地删除
            _t.list.data.splice(index,1)
          }
        })
      },
      /* 修改商品状态 : 上下架  down = 1 时 强制下架*/
      updateStatus(item,down){
        let _t = this
        let data = {
          id: item.id,
        }
        if(!service.check.isNull(down)){
          data.down = down
        }
        this.$axios({
          url: '/merchant/merchantGroupGoods/updateStatus',
          method: 'post',
          data: data,
          header: {
            "Authorization": this.token,
            "Content-type": this.contentType,
            "type": "merchantsToken"
          },
        }).then(res => {
          console.log('/merchant/merchantGroupGoods/updateGoods : ' ,res)
          if(res.code === 0){
            let msg = '';
            if(item.status === 0){
              item.status = -1;
              msg += '下架成功';
            }else{
              item.status = 0;
              msg += '上架成功'
            }
            _t.$refs.popup.success(msg);
          }else if(res.code === 1 && res.result === '当前商品已有用户下单'){
            _t.modal.byUpdateStatus.open(item);
          }
        })
      },
      listSelectionChange(list){
        console.log(list)
      },
      /* 获取团购商品分类选项 */
      getCategoryOptions() {
        let _t = this;
        this.$axios({
          url: 'system/sysCategory/listNoPage',
          method: 'post',
          data: {
            type: 3
          },
          header: {
            "Authorization": this.token,
            "Content-type": this.contentType,
            "type": "merchantsToken"
          },
        }).then(res => {
          console.log('system/sysCategory/listNoPage :', res)
          if (res.code === 0) {
            _t.options.goodsCategory.ops[0] = res.result;
          }
        })
      },
		}
	}
</script>

<style lang="scss">
.operation-btn{
  margin: 2rpx 2rpx;
}
.table-th-font{
  font-size: 30rpx;
  color: #1c6f5c;
}
#text{
  display: -webkit-box; /*弹性伸缩盒子模型显示*/
  -webkit-box-orient: vertical; /*排列方式*/
  -webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
  overflow: hidden; /*溢出隐藏*/
}

/*表头样式*/
.uni-table-th {
  background-color: #eff8ff;
  border: 1px #EBEEF5 solid;
}
/*内容样式*/
.uni-table-td{
  border: 1px #EBEEF5 solid;
}
.uni-fab__item-text {
  font-size: 24rpx !important;
}
</style>
